<template>
  <el-table v-loading="state.loading" ref="multipleTable" tooltip-effect="dark"
    :data="state.tableData"
    style="width: 100%">
    <el-table-column prop="orderno" label="订单号" align="center" width="210"/>
    <el-table-column label="类型" align="center" width="100">
      <template #default="scope">
        <el-tag v-if="scope.row.mode === 1">配送订单</el-tag>
        <el-tag v-else>自提订单</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="fee" label="支付金额" align="center" width="100"/>
    <el-table-column prop="total_fee" label="总金额" align="center" width="100"/>
    <el-table-column prop="coupon_fee" label="抵扣金额" align="center" width="100"/>
    <el-table-column label="配送方式" align="center">
      <template #default="scope">
        <el-tag v-if="scope.row.delivery_way === 100">商家配送</el-tag>
        <el-tag v-else type="warning">快递配送</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="支付时间" align="center">
      <template #default="scope">
        {{ scope.row.pay_time && toDateTime(scope.row.pay_time) }}
      </template>
    </el-table-column>
  </el-table>
  <!--总数超过一页，再展示分页器-->
  <el-pagination
    background
    layout="prev, pager, next, total"
    :page-size="params.limit"
    :total="state.total"
    :current-page="params.currentPage"
    @current-change="changePage"/>
</template>

<script setup>
import { defineProps } from "vue";
import { toDateTime } from "../../utils";
import { AdminOrderList } from "../../api/server/order";

const props = defineProps({
  user: Object,
})
const state = reactive({
  loading: true,
  tableData: [],
  total: 0,
})
const params = reactive({
  status: 300,
  page: 1,
  limit: 10
})

const getMyOrderList = async () => {
  params.user_id = props.user.id
  state.loading = true

  const { data, total, current_page } = await AdminOrderList(params)

  state.tableData = data
  state.total = total
  params.page = current_page
  state.loading = false
}


const changePage = (value) => {
  params.page = value
  getMyOrderList()
}

defineExpose({
  getMyOrderList
})
</script>

<style scoped>

</style>
